<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      ul {
        list-style: none;
      }

      body {
        background-color: black;
      }

      .c-nav {
        width: 900px;
        height: 42px;
        background: #fff url(images/rss.png) no-repeat right center;
        margin: 100px auto;
        border-radius: 5px;
        position: relative;
      }

      .c-nav ul {
        position: absolute;
      }

      .c-nav li {
        float: left;
        width: 83px;
        text-align: center;
        line-height: 42px;
      }

      .c-nav li a {
        color: #333;
        text-decoration: none;
        display: inline-block;
        height: 42px;
      }

      .c-nav li a:hover {
        color: white;
      }

      .c-nav li.current a {
        color: #0dff1d;
      }

      .cloud {
        position: absolute;
        left: 0;
        top: 0;
        width: 83px;
        height: 42px;
        background: url(images/cloud.gif) no-repeat;
      }
    </style>
    <script src="animate.js"></script>
    <script>
      window.addEventListener("load", function () {
        // 获取元素
        var cloud = document.querySelector(".cloud");
        var c_nav = document.querySelector(".c-nav");
        var lis = document.querySelectorAll("li");
        // li绑定点击事件
        var count = 0; // 作为筋斗云其实位置
        for (var i = 0; i < lis.length; i++) {
          // 鼠标经过 当前的li的位置作为目标值
          lis[i].addEventListener("mouseenter", function () {
            animate(cloud, this.offsetLeft);
          });
          // 鼠标离开 还原0
          lis[i].addEventListener("mouseleave", function () {
            animate(cloud, count);
          });
          // 鼠标点击 当前的li作为目标位置
          lis[i].addEventListener("click", function () {
            count = this.offsetLeft;
          });
        }
      });
    </script>
  </head>

  <body>
    <div id="c_nav" class="c-nav">
      <span class="cloud"></span>
      <ul>
        <li class="current"><a href="#">首页新闻</a></li>
        <li><a href="#">师资力量</a></li>
        <li><a href="#">活动策划</a></li>
        <li><a href="#">企业文化</a></li>
        <li><a href="#">招聘信息</a></li>
        <li><a href="#">公司简介</a></li>
        <li><a href="#">我是佩奇</a></li>
        <li><a href="#">啥是佩奇</a></li>
      </ul>
    </div>
  </body>
</html>
